import { defineComponent, ref } from 'vue';
import styles from './bannerArea.module.less';
import { imgPath } from '@/common/utils';
import { useRouter } from 'vue-router';
import BannerNavs from './bannerNavs/bannerNavs';
import { message } from 'ant-design-vue';
export default defineComponent({
  name: 'bannerArea',
  setup() {

    const router = useRouter();
    // 跳转路由path
    const toPath = (path: string) => {
      router.push(path);
    }
    const swiperList = ref([
      {
        img: () => <img src={imgPath("/home/banner-img1.jpg")} />,
        text: '1',
        path:'/duty/detial?id=1'
      },
      {
        img: () => <img src={imgPath("/home/banner-img2.jpg")} />,
        text: '2',
        path: '/propertyLiability/homeStayInsureDetail?projectCode=20XM531195&id=民宿企业综合保险'
      },
      // {
      //   img: () => <img src={imgPath("/home/banner-img3.png")} />,
      //   text: '3',
      //   path: '/propertyLiability/details?productCode=20PR890597&id=雇主责任保险'
      // },
      // {
      //   img: () => <img src={imgPath("/home/banner-img4.png")} />,
      //   text: '4',
      //   path: '/propertyLiability/details?productCode=20PR613323&id=公众责任保险'
      // },
      // {
      //   img: () => <img src={imgPath("/home/banner-img5.jpg")} />,
      //   text: '5',
      //   path: '/PersInsureDetail?productCode=20PR966524'
      // },
      // {
      //   img: () => <img src={imgPath("/home/banner-img6.png")} />,
      //   text: '6',
      //   path: '/GroupDetail?productCode=19PR289190&productName=研学无忧保险产品国内方案二&groupCode=HT001&schemeName=方案二'
      // },
    ])
    //轮播图
    const BannerSwiperArea = () => (
      <a-carousel class={styles['banner-swiper']} autoplay>
        {
          swiperList.value.map((itemS: any) => (
            <div class={styles['banner-swiper-item']}>
              <itemS.img class={styles['banner-swiper-img']} />
            </div>
          ))
        }
      </a-carousel>
    )
    const notic = ref([
      {
        content: () => <span>关于安盛天平财产保险有限公司的旅行社责任保险下架的通知</span>,
        time: () => <span>2023-10-25 16:36:40</span>,
      },
      {
        content: () => <span>中联金安平安境内旅行险产品变更</span>,
        time: () => <span>2023-10-15 16:36:40</span>,
      },
    ])

    //公告通知区域
    const Notice = () => (
      <div class={styles.notice}>
        <div class={styles['notice-box']}>
          <div class={styles['notice-left']}>
            <img src={imgPath('/home/Notice.png')} />
            <span>公告通知</span>
          </div>
          <div>
            <a-carousel class={styles['notice-info']} autoplay dot-position="left">
              {
                notic.value.map((itemS: any) => (
                  <div class={styles['item-one']}>
                    <div class={styles.circle}></div>
                    <itemS.content />
                    <itemS.time />
                  </div>
                ))
              }
            </a-carousel>
          </div>
          <div class={styles['notice-right']}>
            <span onClick={() => { message.success('未开放该功能') }}>更多公告》</span>
          </div>
        </div >
      </div >
    )
    return () => (
      <div class={styles.banner}>
        <BannerSwiperArea />
        {/* <BannerNavs /> */}
        {/* <Notice /> */}
      </div>
    )
  }
})